<template>
    <div class="main-container">
        <!-- 菜单部分 -->
        <div class="menu-container">
            <el-menu
                style="--el-menu-horizontal-height: 100px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background-color: #e0e9ff; border-bottom: 2px solid #73a6ff;"
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
            >
                <el-menu-item index="1" >
                    <img src="../assets/logo.png" alt="Logo" class="logo">
                </el-menu-item>
                <el-menu-item index="2" @click="route.push('/')">论坛</el-menu-item>
                <el-menu-item index="3" @click="route.push('/MeseeagePage')">消息中心</el-menu-item>
                <el-menu-item index="4"  @click="UserPage()">个人资料</el-menu-item>
                <el-menu-item v-if="isLogin" index="5" style="margin-left: 120px;">
                    <span>{{ username }}</span>
                    <el-avatar
        shape="circle"
        :size="50"
        :fit="fit"
        :src=userAvater
      />
                    <el-sub-menu>
                        <!-- <el-menu-item @click="route.push('/MeseeagePage')">我的</el-menu-item>
                        <el-menu-item @click="UserPage()">个人资料</el-menu-item> -->
                        <el-menu-item @click="logout()" plain>退出登录</el-menu-item>
                        <el-menu-item v-if="role()" @click="ManagerPage()" plain>管理端</el-menu-item>
                    </el-sub-menu>
                </el-menu-item>
                <el-menu-item v-else index="5" style="margin-left: 120px;" @click="logindialogVisible = true">
                    登录
                </el-menu-item>
            </el-menu>
        </div>

        <!-- 对话框部分 -->
        <div class="dialog-container" style="display: flex; justify-content: flex-end;">
            <!-- 登录对话框 -->
            <el-dialog
                v-model="logindialogVisible"
                title="登录"
                width="500"
                :before-close="handleClose"
                class="custom-dialog"
            >
                <template #footer>
                    <el-form
                        :label-position="left"
                        label-width="auto"
                        :model="loginformLabelAlign"
                        class="custom-form"
                    >
                        <el-form-item label="用户名">
                            <el-input style="width: auto;" v-model="loginformLabelAlign.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input style="width: auto;" v-model="loginformLabelAlign.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="login()" class="custom-button login-button">登录</el-button>
                            <el-button @click="regdialogVisible = true; logindialogVisible = false" class="custom-button">注册</el-button>
                            <el-button @click="findialogVisible = true; logindialogVisible = false" class="custom-button">找回密码</el-button>
                            <el-button @click="logindialogVisible = false" class="custom-button">取消</el-button>
                        </el-form-item>
                       
                    </el-form>
                </template>
            </el-dialog>

            <!-- 注册对话框 -->
            <el-dialog
                v-model="regdialogVisible"
                title="注册"
                width="500"
                :before-close="handleClose"
                class="custom-dialog"
            >
                <template #footer>
                    <el-form
                        :label-position="left"
                        label-width="auto"
                        :model="regformLabelAlign"
                        class="custom-form"
                    >
                        <el-form-item label="用户名">
                            <el-input style="width: auto;" v-model="regformLabelAlign.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input style="width: auto;" v-model="regformLabelAlign.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input style="width: auto;" v-model="regformLabelAlign.confirmpassword" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input style="width: auto;" v-model="regformLabelAlign.number"></el-input>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button @click="register()" class="custom-button register-button">注册</el-button>
                            <el-button @click="regdialogVisible = false" class="custom-button">取消</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </el-dialog>

            <!-- 找回密码对话框 -->
            <el-dialog
                v-model="findialogVisible"
                title="找回密码"
                width="500"
                :before-close="handleClose"
                class="custom-dialog"
            >
                <template #footer>
                    <el-form
                        :label-position="left"
                        label-width="auto"
                        :model="findformLabelAlign"
                        class="custom-form"
                    >
                        <el-form-item label="账号">
                            <el-input style="width: auto;" v-model="findformLabelAlign.username"></el-input>
                            <el-button class="custom-button send-code-button" @click=confirm()>发送验证码</el-button>
                        </el-form-item>
                        <el-form-item label="验证码">
                            <el-input style="width: auto;" v-model="findformLabelAlign.confirmnumber"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="custom-button confirm-button" @click="findPassword()">确认</el-button>
                            <el-button @click="findialogVisible = false" class="custom-button">取消</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </el-dialog>
            <el-dialog
                v-model="restPassWorddialogVisible"
                title="重置密码"
                width="500"
                :before-close="handleClose"
                class="custom-dialog"
            >
                <template #footer>
                    <el-form
                        :label-position="left"
                        label-width="auto"
                        :model="findformLabelAlign"
                        class="custom-form"
                    >
                        <el-form-item label="新密码">
                           <el-input v-model="restPassWord.password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input v-model="restPassWord.confirmPassword"></el-input>
                        </el-form-item>
                        <el-form-item>
                           <el-button @click="restUser()">重置密码</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, reactive } from 'vue';
import { ref } from 'vue'
import { useRoute,useRouter } from "vue-router";
import { config,userConfig } from '@/config/config';
import ZonesPage from '@/pages/ZonesPage.vue';

let restPassWorddialogVisible=ref(false)
const router=useRoute()
const route=useRouter()
let loginformLabelAlign=reactive({
  username: '',
  password: '',
  
})

let regformLabelAlign=reactive({
  username: '',
  password: '',
  confirmpassword:'',
  number:''
  
})

let findformLabelAlign=reactive({
username:'',
 confirmnumber:''
})

let restPassWord=reactive({
    password:'',
    confirmPassword:''
})

let role=()=>{
    if(localStorage.getItem('role') === '管理员'){
        return true
    }else{
        return false
    }
}

const logindialogVisible = ref(false)
const regdialogVisible= ref(false)
const findialogVisible=ref(false)
const isLogin=ref(false)
const username=ref('')
let avater=ref('')
let userAvater=ref(localStorage.getItem("avater"))

// let config = {
//   headers: {
//     token: "token",
//   },
// };

onMounted(()=>{
  if(localStorage.getItem("username")!=null){
    username.value=localStorage.getItem("username")
    isLogin.value=true
  }
})

 function register() {
  if(regformLabelAlign.password.length<6||regformLabelAlign.password.length>16){
    alert("密码长度应为6到16位")
  }else{
    if(regformLabelAlign.password!=regformLabelAlign.confirmpassword){
    alert("两次密码输入不一致")
  }
  else{
   axios.post("api/user/register",regformLabelAlign,config)
    .then(function(response){
     if(response.data.code==200){
     regdialogVisible.value=false
     }else{
      alert(response.data.msg)
     }
     
    })
  }
  }
  regformLabelAlign.username = '';
  regformLabelAlign.password = '';
  regformLabelAlign.confirmpassword = '';
  regformLabelAlign.number = '';
  
}
const login=()=>{
  if(loginformLabelAlign.username==''||loginformLabelAlign.password==''){
    alert("请输入用户名和密码")
  }else{
    axios.post("api/user/login",loginformLabelAlign,config)
    .then(function(response){
      if(response.data.code!=200){
        alert("用户名或密码错误")
      }else{
        console.log("头像地址:"+userAvater.value)
        console.log(response.data)
        logindialogVisible.value=false
        loginformLabelAlign.username='',
        loginformLabelAlign.password=''
        localStorage.setItem("userId",response.data.data.id)
        localStorage.setItem("token",response.data.data.token)
        localStorage.setItem("username",response.data.data.username)
        localStorage.setItem("role",response.data.data.role)
        localStorage.setItem("avater",response.data.data.avator)
        alert("登陆成功")
        isLogin.value=true
        username.value=response.data.data.username
       // userAvater.value=response.data.data.avator
        
        route.push("ZonesPage")
        window.location.reload();
      }
    })
  }
loginformLabelAlign.username='',
loginformLabelAlign.password=''

}

const logout=()=>{
  localStorage.removeItem("userId")
  localStorage.removeItem("token")
  localStorage.removeItem("username")
  localStorage.removeItem("role")
  isLogin.value=false
  username.value=""
  route.push("ZonesPage")
  window.location.reload();
 
}

const UserPage=()=>{
    route.push({
    name:"UserPage",
    query:{
      user:localStorage.getItem("userId")
    }
  })
   
}
function ManagerPage(){
route.push({
    name:'ManagePage'
})
}
let confirmCode=ref('')
const confirm=()=>{
    let userDto={
        username:findformLabelAlign.username
    }
    axios.post("api/user/confirmCode",userDto).then(function(response){
        confirmCode.value=response.data.data
        console.log(confirmCode.value)
    })
}
const findPassword=()=>{
    if(confirmCode.value==findformLabelAlign.confirmnumber){
        restPassWorddialogVisible.value=true
    }else{
        alert("验证码错误")
    }
    

}

const restUser=()=>{
    if(restPassWord.password.length<6||restPassWord.password.length>11){
        alert("密码长度应大于6位小于11位")
    }else{
        if(restPassWord.password!=restPassWord.confirmPassword){
            alert("确认密码与密码不一致")
        }else{
            let userDto={
                username:findformLabelAlign.username,
                password:restPassWord.password
            }
            axios.post("api/user/changePassword",userDto).then(function(response){
                console.log(response.data)
                alert("操作成功")
                window.location.reload();
            })
        }
    }
}
</script>

<style>

</style>